<%@ page language="java" pageEncoding="utf-8"%>
<form action="${ctx }/user/user.action" id="setting_form" method="post">
	<div style="margin: 0; padding: 0; display: inline">
		<input type="hidden" name="user.id" value="${me.id}" />
		<input type="hidden" name="type" value="${param.type}"/>
	</div>
	<fieldset>
		<ul>
			<li><label>用户名</label>${me.username}</li>
			<hql:queryForUnique hql="from UserAuthority where userId=${me.id}"
				id="userAuthority" />
			<li><label>用户身份</label> <c:if
					test="${userAuthority.authority=='manager' }">管理者</c:if> <c:if
					test="${userAuthority.authority=='customer' }">普通用户</c:if></li>
			<li><label>加入时间</label><fmt:formatDate value="${me.regTime}" type="date" pattern="yyyy-MM-dd"/></li>
		</ul>
		<ul>
		<br>
			<li><label for="user_realname">真实姓名</label> <input type="text"
				size="30" name="user.realname" id="user_realname" class="text" value="${user.realname}">
			</li>
			<li><label for="user_description">自我介绍</label> <textarea
					id="user_about" rows="5" name="user.about" cols="50">${user.about}</textarea></li>
			<li><label for="user_fromto">来自</label> <input type="text"
				size="30" name="user.from" id="user_from" class="text" value="${user.from}"></li>
			<li><label for="user_gender">性别</label> <select
				name="user.gender" id="user_gender"><option value="${user.gender}" selected>${user.gender}</option>
					<option value="男">男</option>
					<option value="女">女</option>
			</select>
			</li>
			<li><label for="user_interest">爱好</label> <input type="text"
				size="30" name="user.interest" id="user_interest" class="text" value="${user.interest}">
			</li>
			<li><label for="user_qq">QQ号码</label> <input type="text"
				size="30" name="user.qq" id="user_qq" class="text" value="${user.qq}">
			</li>
		</ul>
		<ul>
			<li><label>个人头像</label> <a target="_blank" href="${ctx}"><img
					id="myphoto" title="${me.username }的博客: "
					src="${ctx}/user/file.action?method:previewPic&fileId=${me.pictureAppended}"
					class="logo" alt="${me.username }" style="height: 100px;"> </a>
			</li>
			<li><label for="user_logo">上传新头像</label> <input type="file"
				size="30" name="sampleFile" id="sampleFile"
				accept="image/gif, image/jpeg"
				class="validate-file-jpg-gif-png-bmp-jpeg"
				onchange="fileSelected();">
			</li>
		</ul>
	</fieldset>
	<div style="text-align: center;">
		<input id="submit_button" class="submit" type="submit" value="提交"
			name="method:save">
	</div>
</form>
<div id="progressNumber"></div>
<script type="text/javascript">
	function fileSelected() {
		var file = document.getElementById("sampleFile").files[0];
		if (file) {
			var fileName = file.name;
			var postFix = fileName.match(/(\S*)\.(\S*)$/)[2];
			if (postFix == 'bmp' || postFix == 'jpeg' || postFix == 'gif'
					|| postFix == 'jpg' || postFix == 'png') { //如果是图片的话
				var fileSize = 0;
				if (file.size > 1024 * 1024)
					fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100)
							.toString()
							+ 'MB';
				else
					fileSize = (Math.round(file.size * 100 / 1024) / 100)
							.toString()
							+ 'KB';
				performAjaxSubmit();
			} else { //如果不符合要求的情况
				if (window.ActiveXObject) {//for IE
					file.select(); //select the file ,and clear selection
					document.selection.clear();
				} else if (window.opera) { //for opera
					file.type = "text";
					file.type = "file";
				} else
					file.value = ""; //for FF,Chrome,Safari
				alert("您选择的文件非图片格式，请重新选择文件。。。。。。");
			}
		}
	}
	function uploadProgress(evt) {
		if (evt.lengthComputable) {
			var percentComplete = Math.round(evt.loaded * 100 / evt.total);
			document.getElementById('progressNumber').innerHTML = '<Strong>Percentage:</Strong>'
					+ percentComplete.toString() + '%';
		} else {
			document.getElementById('progressNumber').innerHTML = 'unable to compute';
		}
	}
	function performAjaxSubmit() {
		var sampleFile = document.getElementById("sampleFile").files[0];
		var formdata = new FormData();
		formdata.append("sampleFile", sampleFile);
		var xhr = new XMLHttpRequest();
		xhr.upload.addEventListener("progress", uploadProgress, false);
		xhr.open("POST", "${ctx}/user/file.action?method:uploadFile=xx", true);
		xhr.send(formdata);
		xhr.onload = function(e) {
			if (this.status == 200) {
				eval("var json=" + this.responseText);
				//将图片显示出来
				$("#myphoto").attr(
						"src",
						contextPath
								+ "/user/file.action?method:previewPic&fileId="
								+ json.fileId);
				$.ajax({
					url : contextPath + "/user/file.action",
					type : "post",
					dataType : "json",
					data : {
						"fileId" : json.fileId,
						"method:changeAvatar" : "ok"
					},
					success : function(data) {
					},
					complete : function() {
					}
				});

			}
		};
	}
</script>